<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格美化</title>
	</head>
	<style>
		.table{
			 border-collapse: collapse; /**相邻边框合并为一个**/
			 border: 1px solid #e6e6e6;
			 font-size:12px;
			 color: #606266;
		}
		.table thead{
			background-color: #f8f8f8;
		}
		.table th{
			padding: 5px;
			color:#303133;
		}
		.table td{
			padding: 5px;
			width: 100px;
		}
		.table tr td {
			line-height: 1px;
			border: 1px solid rgba(239, 239, 245, 1);
			height: 24px;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
		.table td{
			box-sizing: border-box;
			max-width: 100px;
			white-space: nowrap; /* 文本不换行 */
			overflow: hidden; /* 溢出内容隐藏 */
			text-overflow: ellipsis; /* 溢出内容显示省略号 */
		}
		.table tr th{
			border: 1px solid rgba(239, 239, 245, 1);
		}
		
		
		.table_div {
		  display: table;
		  width: 100%;
		  border-collapse: collapse;
		}
		
		.row {
		  display: table-row;
		}
		
		.cell {
		  display: table-cell;
		  border: 1px solid black;
		  padding: 5px;
		}
	</style>
	<body>
		<div>
			<table class="table">
				<thead>
					<tr>
						<th>标题</th>
						<th>测试1</th>
						<th>测试2</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1112222222222222222222222222222222222</td>
						<td>111</td>
						<td>111</td>
					</tr>
					<tr>
						<td>111</td>
						<td>111</td>
						<td>111</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
		
			<hr>
			
			<div class="table_div">
			  <div class="row">
			    <div class="cell">单元格 1</div>
			    <div class="cell">单元格 2</div>
			    <div class="cell">单元格 3</div>
			  </div>
			  <div class="row">
			    <div class="cell">单元格 4</div>
			    <div class="cell">单元格 5</div>
			    <div class="cell">单元格 6</div>
			  </div>
			  <div class="row">
			    <div class="cell">单元格 7</div>
			    <div class="cell">单元格 8</div>
			    <div class="cell">单元格 9</div>
			  </div>
			</div>
			
			<hr>
		
			
		</div>
		<script>
			
		</script>
	</body>
</html>